<template>
    <template v-if="loading">
        <el-skeleton  :loading="loading" animated>
            <template #template>
                <el-card  shadow="never" class="mt-5">
                    <template #header>
                        <div class="flex justify-between">
                            <el-skeleton-item variant="text" style="width: 30%;height: 25px;" />
                            <el-skeleton-item variant="text" style="width: 30%;height: 25px;" />
                        </div>
                    </template>
                    <el-row :gutter="20">
                        <el-col :span="6" :offset="0" v-for="(item,index) in btns" :key="index">
                            <el-card shadow="hover" class="border-0 bg-light-400">
                                <div class="flex flex-col items-center justify-center">
                                    <el-skeleton-item variant="text" style="width: 30%;height: 25px;" />
                                    <el-skeleton-item variant="text" style="width: 30%;height: 25px;margin-top: 10px;" />
                                </div>
                            </el-card>
                        </el-col>
                    </el-row>
                </el-card>
            </template>
        </el-skeleton>
    </template>    

    <el-card v-else shadow="never" class="mt-5">
        <template #header>
            <div class="flex justify-between">
                <span class="text-xl text-gray-500 font-bold">{{title}}</span>
                <el-tag type="danger" effect="plain">{{tip}}</el-tag>
            </div>
        </template>
        <el-row :gutter="20">
            <el-col :span="6" :offset="0" v-for="(item,index) in btns" :key="index">
                <el-card shadow="hover" class="border-0 bg-light-400">
                    <div class="flex flex-col items-center justify-center">
                        <span class="text-xl mb-2"><pug-num :value="item.num"></pug-num></span>
                        <span class="text-sm text-gray-500">{{item.text}}</span>
                    </div>
                </el-card>
            </el-col>
        </el-row>
    </el-card>
    
</template>

<script setup>
    import {reactive,ref} from 'vue'
    var loading =ref(true);
    setTimeout(()=>{
        loading.value = false;
    },600)


    defineProps({
        title:String,
        tip:String
    })

    const btns = [
        {num:432,text:"待支付"},
        {num:432,text:"审核中"},
        {num:432,text:"已下架"},
        {num:432,text:"库存告警"}
    ]
</script>